<template>
  <div style="padding: 30px;background-color: #120F24;">
    <div>
      <el-button v-has :type="type=='硬件资源管理'?'primary':''" @click="type='硬件资源管理'">硬件资源管理</el-button>
      <el-button v-has :type="type=='软件资源管理'?'primary':''" @click="type='软件资源管理'">软件资源管理</el-button>
    </div>
    <ech v-if="type=='硬件资源管理'" />
    <el-table style="margin-top: 20px;" v-if="type=='软件资源管理'" :data="tableData" border fit stripe highlight-current-row>
      <el-table-column v-for="(item,index) in tableHead" :key="item.id" :label="item.label" :prop="item.title"
        align="center">
        <template slot-scope="scope">
          <div v-if="item.title!='content'">{{scope.row[item.title]}}</div>
          <el-button v-else @click="connect(scope.$index)" :type="scope.row[item.title]?'primary':'danger'">
            {{scope.row[item.title]?'已连接':'未连接'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import ech from "./components/echarts.vue";
  export default {
    data() {
      return {
        type: '硬件资源管理',
        tableHead: [{
            id: 1,
            label: '连接等级',
            title: 'grade'
          }, {
            id: 2,
            label: '连接名称',
            title: 'name'
          }, {
            id: 3,
            label: '连接类型',
            title: 'type'
          }, {
            id: 4,
            label: '主机名称',
            title: 'hostname'
          },
          {
            id: 5,
            label: '数据库名称',
            title: 'database'
          },
          {
            id: 6,
            label: '端口号',
            title: 'portNumber'
          },
          {
            id: 7,
            label: '操作',
            title: 'content'
          }
        ],
        tableData: [{
            grade: '一般',
            name: 'ordinary',
            type: 'MS-SQL-Server',
            hostname: '192.168.10.232',
            database: 'ordinary-database',
            portNumber: '9000',
            content: true
          },
          {
            grade: '高级',
            name: 'advanced',
            type: 'MS-SQL-Server(Native)',
            hostname: '192.168.10.50',
            database: 'advanced-database',
            portNumber: '8000',
            content: false
          },
          {
            grade: '选项',
            name: 'option',
            type: 'MariaDB',
            hostname: '192.168.10.20',
            database: 'option-database',
            portNumber: '3000',
            content: false
          },
          {
            grade: '连接池',
            name: 'connection-pool',
            type: 'MariaDB(SAP DB)',
            hostname: '192.168.10.50',
            database: 'connection-pool-database',
            portNumber: '6000',
            content: false
          },
          {
            grade: '集群',
            name: 'Cluster',
            type: 'MonetDB',
            hostname: '192.168.10.221',
            database: 'Cluster-database',
            portNumber: '7000',
            content: false
          }
        ],
      }
    },
    components: {
      ech
    },
    methods: {
      connect(index) {
        console.log(index)
        if (this.tableData[index].content) {
          this.$message({
            type: 'error',
            message: '断开连接成功'
          })
          this.tableData.forEach((elem, inde) => {
            elem.content = false
          })
        } else {
          this.$message({
            type: 'success',
            message: '连接成功'
          })
          this.tableData.forEach((elem, ind) => {
            if (index == ind) {
              elem.content = true
            } else {
              elem.content = false
            }
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>
